<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="./bootstrap.min.css"/>
    <link rel="stylesheet" href="./bootstrap.min.css">
    <link rel="stylesheet" href="index.css">
    <script src="http://unpkg.com/vue@next"></script>
    <title>Document</title>
</head>
<body>

    <div id="app" class="da">
        <div class="tianjia">
            <input type="text" v-model="shixiang" class="form-control" >
            <button class="btn btn-outline-success" @click="add()">添加</button>
        </div>
        <div class="weiwancheng">
            <h1 class="text-monospace font-weight-bold text-muted">未完成</h1>
            <div class="alert alert-primary" role="alert">
                <ul>
                    <li class="list-group-item list-group-item-info" v-for="(item,index) in list" :key="index" v-focus="item.shijian" >
                        <h5>{{index+1}}. {{item.title}}----
                        <span v-time="shijian"></span> 
                        <button @click="Del(index)" class="btn btn-outline-primary">完成</button></h5>
                    </li>
                </ul>
            </div>
        </div>
        <div class="yiwancheng">
            <h1 class="text-monospace font-weight-bold text-muted">已完成</h1>
            <div class="alert alert-success" role="alert">
                <ul class="bg">
                    <li class="list-group-item list-group-item-info" v-for="(item,index) in list2" :key="index"  >
                        <h5>
                        {{index+1}}. {{item.title}}----
                        <span v-time="shijian"></span>
                    </h5>
                    </li>
                </ul>
            </div>
        </div>
        
    </div>   
</body>

<script>
    const App = {
        data() {
            return {
                shixiang:"",
                list:[],
                list2:[],
                shijian:"", 
            }
        },
        methods:{
            add() {
                if(this.shixiang!=""){
                this.list.push({
                    title: this.shixiang,
                    shijian:new Date().getTime(),
                });
                this.shixiang=""
                }
            },
                Del(index) {
                    this.list2.push({
                    title: this.list[index].title,
                });
                    this.list.splice(index,1)
                },
        },
        directives:{
            focus:{
                mounted(el,binding) {
                    console.log()
                }
            },
            time:{
                mounted(el,binding) {
                    var date = new Date()
                    var Y = date.getFullYear() + '-'
                    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
                    var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
                    var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
                    var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
                    var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
                    el.innerText = Y+M+D+h+m+s
                    console.log()
                }
            }
        }
    }
const app = Vue.createApp(App)    
app.mount('#app')
</script>
</html>